<template>
  <view class="home flex column">
    <u-navbar :is-back="true" :title="coalMineName" :title-bold="true" back-icon-color="#333333" title-color="#000"></u-navbar>
    <view>
      <u-tabs-swiper
        ref="uTabs"
        inactive-color="#999999"
        active-color="#0F643A"
        :list="list"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
      ></u-tabs-swiper>
    </view>
    <swiper class="item one" :current="swiperCurrent" @transition="transition" style="height: 100%" @animationfinish="animationfinish">
      <swiper-item class="swiper-item">
        <enterpriseInfo v-if="swiperCurrent === 0" :customerId="customerId" style="width: 100%; height: 100%"></enterpriseInfo>
      </swiper-item>
      <swiper-item class="swiper-item">
        <safe v-if="swiperCurrent === 1" :customerId="customerId" style="width: 100%; height: 100%"></safe>
      </swiper-item>
      <swiper-item class="swiper-item">
        <license
          v-if="swiperCurrent === 2"
          :superviseIndustry="superviseIndustry"
          :customerId="customerId"
          style="width: 100%; height: 100%"
        ></license>
      </swiper-item>
      <swiper-item class="swiper-item">
        <technicalInfo
          v-if="swiperCurrent === 3"
          :superviseIndustry="superviseIndustry"
          :customerId="customerId"
          style="width: 100%; height: 100%"
        ></technicalInfo>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import enterpriseInfo from './compoments/enterpriseInfo/index'
import safe from './compoments/safe/index'
import license from './compoments/license/index'
import technicalInfo from './compoments/technicalInfo/index'

export default {
  name: 'index',
  components: { enterpriseInfo, safe, license, technicalInfo },
  data() {
    return {
      coalMineName: '',
      customerId: '',
      superviseIndustry: '',
      list: [
        {
          name: '企业信息'
        },
        {
          name: '安全生产'
        },
        {
          name: '企业证照'
        },
        {
          name: '技术资料'
        },
      ],
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0 // swiper组件的current值，表示当前那个swiper-item是活动的
    }
  },
  methods: {
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    }
  },
  onLoad(options) {
    let data = options
    this.coalMineName = data.coalMineName
    this.customerId = data.customerId
    this.superviseIndustry = data.superviseIndustry
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .swiper-div {
    display: flex;
    width: 100%;
    margin-bottom: 10rpx;
  }
}
</style>
